<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<title>我的伙伴</title>
		<link rel="stylesheet" th:href="@{/css/jquery.mobile-1.4.5.min.css }"/>
		<script th:src="@{/js/jquery.min.js}"></script>
		<script th:src="@{/js/jquery.mobile-1.4.5.min.js}"></script>
		<link rel="stylesheet" th:href="@{/css/iconfont.css}"/>
		<style>
			#gridA_1 .ui-block-a{
				width: 20%;
			}
			#gridA_1 .ui-grid-a .ui-block-b{
				width: 80%;
			}
			#gridA_2 .ui-block-a{
				width: 45%;
			}
			#gridA_2 .ui-block-b{
				width: 55%;
			}
			#lv3 .ui-grid-a .ui-block-a{
				width: 80%;
			}
			#lv3 .ui-grid-a .ui-block-b{
				width: 20%;
			}
			#lv4 .ui-grid-a .ui-block-a{
				width: 20%;
			}
			#lv4 .ui-grid-a .ui-block-b{
				width: 80%;
			}
			#lv4 .ui-grid-a .ui-block-b p{
				width: 100% !important;
				float: left !important;
				overflow: hidden !important;
				text-overflow: ellipsis !important;
				white-space: normal !important;
			}
		</style>

		<script type="text/javascript">
			$(document).ready(function(){
				var euserid=window.sessionStorage.getItem("euserid");
				var zhanshiid=window.sessionStorage.getItem("zhanshiid");
				console.log(euserid);
				console.log(zhanshiid);
				var userid="";
				if(euserid!=null){
					userid=euserid;
				}else if(zhanshiid!=null){
					userid=zhanshiid;
				}
				var data={"userid" : userid};
				$.post("/ShowMeController/getShowByUserid",data, function (result) {
					var oData = eval(result);
					var div5_lv1 ='';
					var div5_lv2 ='';
					var div5_lv3 ='';
					var div5_lv4 ='';
					var div5_lv5 ='';
					var div5_lv6 ='';
					$.each(oData,function(i){
						var sType=oData[i].sType;
						if(sType==1){
							div5_lv1 += '<li><h1>'+oData[i].sTitle+'</h1>';
							div5_lv1 += '<p>'+oData[i].sContent+'</p>';
							var sImage=oData[i].sImage;
							if(sImage!=null){
								div5_lv1 += '<div class="ui-bar ui-bar-c">';
								div5_lv1 += '<img  src="'+sImage+'" width="100%"/>';
								div5_lv1 += '</div>';
							}
							div5_lv1 += '</li>';
							dv1.style.display = "block";
						}
						if(sType==2){
							div5_lv2 += '<li><h1>'+oData[i].sTitle+'</h1>';
							div5_lv2 += '<p>'+oData[i].sContent+'</p>';
							var sImage=oData[i].sImage;
							if(sImage!=null){
								div5_lv2 += '<div class="ui-bar ui-bar-c">';
								div5_lv2 += '<img  src="'+sImage+'" width="100%"/>';
								div5_lv2 += '</div>';
							}
							div5_lv2 += '</li>';
							dv2.style.display = "block";
						}
						if(sType==3){
							div5_lv3 += '<li><h1>'+oData[i].sTitle+'</h1>';
							div5_lv3 += '<p>'+oData[i].sContent+'</p>';
							var sImage=oData[i].sImage;
							if(sImage!=null){
								div5_lv3 += '<div class="ui-bar ui-bar-c">';
								div5_lv3 += '<img  src="'+sImage+'" width="100%"/>';
								div5_lv3 += '</div>';
							}
							div5_lv3 += '</li>';
							dv3.style.display = "block";
						}
						if(sType==4){
							div5_lv4 += '<li><h1>'+oData[i].sTitle+'</h1>';
							div5_lv4 += '<p>'+oData[i].sContent+'</p>';
							var sImage=oData[i].sImage;
							if(sImage!=null){
								div5_lv4 += '<div class="ui-bar ui-bar-c">';
								div5_lv4 += '<img  src="'+sImage+'" width="100%"/>';
								div5_lv4 += '</div>';
							}
							div5_lv4 += '</li>';
							dv4.style.display = "block";
						}
						if(sType==5){
							div5_lv5 += '<li><h1>'+oData[i].sTitle+'</h1>';
							div5_lv5 += '<p>'+oData[i].sContent+'</p>';
							var sImage=oData[i].sImage;
							if(sImage!=null){
								div5_lv5 += '<div class="ui-bar ui-bar-c">';
								div5_lv5 += '<img  src="'+sImage+'" width="100%"/>';
								div5_lv5 += '</div>';
							}
							div5_lv5 += '</li>';
							dv5.style.display = "block";
						}
						if(sType==6){
							div5_lv6 += '<li><h1>'+oData[i].sTitle+'</h1>';
							div5_lv6 += '<p>'+oData[i].sContent+'</p>';
							var sImage=oData[i].sImage;
							if(sImage!=null){
								div5_lv6 += '<div class="ui-bar ui-bar-c">';
								div5_lv6 += '<img  src="'+sImage+'" width="100%"/>';
								div5_lv6 += '</div>';
							}
							div5_lv6 += '</li>';
							dv6.style.display = "block";
						}
						// markup += "<li><a href='"+oData[i].uri+"' style='background-color:rgba(0,0,255,0);' data-ajax='false'>"+oData[i].newid+"."+oData[i].name+"</a></li>";
						// markup += "<li><a href='"+oData[i].uri+"'><img src='"+oData[i].phone+"' style='padding-top: 10px;margin-left: 10px;'/><h2>"+oData[i].title+"</h2><p>"+oData[i].content+"</p><p class='ui-li-aside'><strong>"+oData[i].time+"</strong></p></a></li>";


					});
					$("#div5_lv1").html(div5_lv1);
					$("#div5_lv2").html(div5_lv2);
					$("#div5_lv3").html(div5_lv3);
					$("#div5_lv4").html(div5_lv4);
					$("#div5_lv5").html(div5_lv5);
					$("#div5_lv6").html(div5_lv6);
					// $("#lv1").html(markup);
					$("#div5_lv1").trigger("create").listview("refresh");
					$("#div5_lv2").trigger("create").listview("refresh");
					$("#div5_lv3").trigger("create").listview("refresh");
					$("#div5_lv4").trigger("create").listview("refresh");
					$("#div5_lv5").trigger("create").listview("refresh");
					$("#div5_lv6").trigger("create").listview("refresh");
				});
			});
			function guiji(){
				var lv3 = document.getElementById("lv3");
				var lv4 = document.getElementById("lv4");
				var div5 = document.getElementById("div5");
				$("#jian").removeClass("iconfont icon-jian2");
				$("#jian").addClass("iconfont icon-jian");
				$("#zuji").removeClass("iconfont icon-zuji2");
				$("#zuji").addClass("iconfont icon-zuji");
				$("#guiji").removeClass("iconfont icon-guiji");
				$("#guiji").addClass("iconfont icon-guiji2");
				lv3.style.display = "block";
				lv4.style.display = "none";
				div5.style.display = "none";
			}
			function jian(){
				var lv3 = document.getElementById("lv3");
				var lv4 = document.getElementById("lv4");
				var div5 = document.getElementById("div5");
				$("#guiji").removeClass("iconfont icon-guiji2");
				$("#guiji").addClass("iconfont icon-guiji");
				$("#zuji").removeClass("iconfont icon-zuji2");
				$("#zuji").addClass("iconfont icon-zuji");
				$("#jian").removeClass("iconfont icon-jian");
				$("#jian").addClass("iconfont icon-jian2");
				lv3.style.display = "none";
				div5.style.display = "none";
				lv4.style.display = "block";
			}
			function zuji(){
				var lv3 = document.getElementById("lv3");
				var lv4 = document.getElementById("lv4");
				var div5 = document.getElementById("div5");
				$("#guiji").removeClass("iconfont icon-guiji2");
				$("#guiji").addClass("iconfont icon-guiji");
				$("#jian").removeClass("iconfont icon-jian2");
				$("#jian").addClass("iconfont icon-jian");
				$("#zuji").removeClass("iconfont icon-zuji");
				$("#zuji").addClass("iconfont icon-zuji2");
				lv3.style.display = "none";
				lv4.style.display = "none";
				div5.style.display = "block";
			}
			function saveEid(eid){
				sessionStorage.setItem("eid",eid);
				console.log(eid);
				window.location = "/ViewController/toDetailed";
			}
			</script>
	</head>
	
	<body>
		<div data-role = "page">
			<div data-role = "header"  data-fullscreen = "true">
				<a  data-rel = "back" data-icon = "back"  data-ajax = "false"  >返回</a>
				<h1>我的伙伴</h1>
				<a href="about.html" data-ajax = "false">关于</a>
			</div>
			<ul data-role = "listview" class="lv1" id="lv1" style="margin-bottom:30px;">
				<li>
				<div class="ui-grid-a" id="gridA_1">
					<div class="ui-block-a">
						<div class="ui-bar ui-bar-c" id="userhead">
							<img th:src='${User.userhead}' width='100%' style='border-radius:100%;'/>
						</div>
					</div>
					<div class="ui-block-b">
						<div class="ui-bar ui-bar-c" id="name">
							<h1 th:text="${User.name}">昵称</h1>
						</div>
					</div>
				</div>
				<div class="ui-grid-a" id="gridA_2">
					<div class="ui-block-a">
						<div  id="tel">
							<a href='tel:${User.tel}' style='text-decoration: none;color:#000000;'><img src='/image/tel.png' width='15%'/><span th:text="${User.tel}"></span></a>
						</div>
					</div>
					<div class="ui-block-b">
						<div  id="email">
							<img src='/image/email.png' width='15%'/><span th:text="${User.email}"></span>
						</div>
					</div>
				</div>
				</li>
				</ul>
				
				<ul data-role = "listview" class="lv2" id="lv2" style="margin-bottom:10px;">
					<li>
						<div class="ui-grid-b">
							<div class="ui-block-a">
								<div class="ui-bar ui-bar-c">
									<span id="guiji" class="iconfont icon-guiji2" onclick="guiji()">轨迹</span>
								</div>
							</div>
							<div class="ui-block-b">
								<div class="ui-bar ui-bar-c">
									<span id="jian" class="iconfont icon-jian" onclick="jian()">推荐</span>
								</div>
							</div>
							<div class="ui-block-c">
								<div class="ui-bar ui-bar-c">
									<span id="zuji" class="iconfont icon-zuji" onclick="zuji()">展示</span>
								</div>
							</div>
						</div>
					</li>
					
				</ul>
				<ul data-role = "listview" id="lv3">
					<div th:each="Exs,stat:${ExList}">
						<a style='color: #000000; text-decoration:none;' data-ajax='false' th:onclick="'javascript: saveEid('+${Exs.eid}+')' ">
					<li style='margin-bottom:5px;background-color:#ffffff;'>
						<div class='ui-grid-a'>
							<div class='ui-block-a'>
								<div class='ui-bar ui-bar-c'>
									<p th:text="${Exs.createtime}">创建时间</p>
								</div>
							</div>
							<div class='ui-block-b'></div>
						</div>
						<div class='ui-grid-solo'>
							<div class='ui-block-a'>
								<div class='ui-bar ui-bar-c'>
									<p th:text="${Exs.eTitle}">标题</p>
								</div>
							</div>
						</div>
						<div th:if="${Exs.eImage} ne ''">
						<div class='ui-grid-solo'>
							<div class='ui-block-a'>
								<div class='ui-bar ui-bar-c'>
									<img th:src='${Exs.eImage}' style='width:150px;'/>
								</div>
							</div>
						</div>
						</div>
						<div class='ui-grid-c'>
							<div class='ui-block-a'>
								<div class='ui-bar ui-bar-c'>
									<span class='iconfont icon-pinglun' th:text="${Exs.comment_points}">评论数</span>
								</div>
							</div>
							<div class='ui-block-b'></div>
							<div class='ui-block-c'></div>
							<div class='ui-block-d'>
								<div class='ui-bar ui-bar-c'>
									<span id='praise' class='iconfont icon-dianzan' th:text="${Exs.praise_points}">点赞数</span>
								</div>
							</div>
						</div>
					</li>
						</a>
					</div>
				</ul>
				<ul data-role = "listview" id="lv4" style="display:none">
					<div th:each="Bks,stat:${BList}">
						<li style='margin-bottom:5px;background-color:#ffffff;'>
							<div class='ui-grid-a'>
								<div class='ui-block-a'>
									<div class='ui-bar ui-bar-c'>
										<div th:if="${Bks.bImage} ne ''">
											<img th:src='${Bks.bImage}' width='100%'/>
										</div>
									</div>
								</div>
								<div class='ui-block-b'>
									<div class='ui-bar ui-bar-c'>
										<h1 th:text="${Bks.bName}">书名</h1>
										<p th:text="${Bks.createtime}">创建时间</p>
										<p th:text="${Bks.introduce}">介绍</p>
									</div>
								</div>
							</div>
						</li>
					<!-- <li>
						<div class = "ui-grid-a">
							<div class="ui-block-a">
							<img src="image/logo.png" width="100%"/>
							</div>
							<div class="ui-block-b">
							<h1>《三体》</h1>
							<p>时间</p>
							</div>
						</div>
					</li> -->
					</div>
				</ul>
				<div id="div5" style="display:none">
					<div data-role = "collapsible-set" id="dv1" style="display:none">
						<div data-role = "collapsible">
							<h3>上学前</h3>
							<ul data-role = "listview" id="div5_lv1">
								<!-- <li>
								<h1>我的初中校园</h1>
								<p>我初中时期印象最深的就是我们美丽下校园</p>
								<div class="ui-bar ui-bar-c">
									<img  src="image/20155516431932.jpg" width="100%"/>
								</div>
								</li> -->
								
							</ul>
						</div>
					</div>
					
					<div data-role = "collapsible-set" id="dv2" style="display:none">
						<div data-role = "collapsible">
							<h3>幼儿园</h3>
							<ul data-role = "listview" id="div5_lv2">
								<!-- <li>
								<h1>我的初中校园</h1>
								<p>我初中时期印象最深的就是我们美丽下校园</p>
								<div class="ui-bar ui-bar-c">
									<img  src="image/20155516431932.jpg" width="100%"/>
								</div>
								</li> -->
								
							</ul>
						</div>
					</div>
					
					<div data-role = "collapsible-set" id="dv3" style="display:none">
						<div data-role = "collapsible">
							<h3>小学</h3>
							<ul data-role = "listview" id="div5_lv3">
								<!-- <li>
								<h1>我的初中校园</h1>
								<p>我初中时期印象最深的就是我们美丽下校园</p>
								<div class="ui-bar ui-bar-c">
									<img  src="image/20155516431932.jpg" width="100%"/>
								</div>
								</li> -->
								
							</ul>
						</div>
					</div>
					
					<div data-role = "collapsible-set" id="dv4" style="display:none">
						<div data-role = "collapsible">
							<h3>初中</h3>
							<ul data-role = "listview" id="div5_lv4">
								<!-- <li>
								<h1>我的初中校园</h1>
								<p>我初中时期印象最深的就是我们美丽下校园</p>
								<div class="ui-bar ui-bar-c">
									<img  src="image/20155516431932.jpg" width="100%"/>
								</div>
								</li> -->
								
							</ul>
						</div>
					</div>
					
					<div data-role = "collapsible-set" id="dv5" style="display:none">
						<div data-role = "collapsible">
							<h3>高中</h3>
							<ul data-role = "listview" id="div5_lv5">
								
							</ul>
						</div>
					</div>
					
					<div data-role = "collapsible-set" id="dv6" style="display:none">
						<div data-role = "collapsible">
							<h3>大学</h3>
							<ul data-role = "listview" id="div5_lv6">
								
							</ul>
						</div>
					</div>
				</div>
			</div>
	</body>
</html>
